<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>发布通知</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="通知类型:">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in form.options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布范围">
                        <el-radio-group v-model="form.range">
                            <el-radio v-model="form.range" label="1">全校</el-radio>
                            <el-radio v-model="form.range" label="2">全部班级</el-radio>
                            <el-radio v-model="form.range" label="3">全部教师</el-radio>
                            <el-radio v-model="form.range" label="4">指定班级</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="班级名称" v-show="form.range == 4">
                        <el-input v-model="form.classname" @blur="isExist"></el-input>
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="文件上传">
                        <el-upload :headers="token" :on-success="update" class="upload-demo" :file-list="filelist" drag action="http://192.168.12.95:8080/job/admin/upload" :limit="1" multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="通知内容" prop="parameter" style="width: 1100px">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
                        <Editor
                            style="height: 500px; overflow-y: hidden"
                            v-model="html"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            :file-list="filelist"
                            :headers="token"
                            :limit="1"
                            @onCreated="onCreated"
                        />
                    </el-form-item>
                    <!-- </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            currLoginId: 0,
            editor: null,
            html: '',
            token: {},
            filelist: [],
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'

            form: {
                // 通知类型
                options: [],
                // 标题
                title: '',
                fileUrl:'',
                // 通知内容
                content: '',
                // 指定范围：1.全校 2. 全部班级 3.全体教师 4.指定班级
                range: '',
                // 班级名称
                classname: ''
            },
            // 班级是否存在标识
            existFlag: true,
            value: ''
        };
    },
    methods: {
        onCreated(editor) {
            // 获取token
            this.token = this.token = {
                token: localStorage.getItem('token')
            };
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
            // 获取当前登录人的id
            this.$axios.get('/auth/admin/getMe').then((r) => {
                if (r.data.code == 200) {
                    this.currLoginId = r.data.data.id;
                }
            });
        },
        onSubmit() {
            const editor = this.editor; // 获取 editor 实例
            const html = editor.getHtml(); // html格式数据
            this.$axios
                .post('/advice/admin/add', {
                    adviceCategoryId: this.value,
                    title: this.form.title,
                    content: html,
                    classname: this.form.classname,
                    pubRange: this.form.range,
                    publisherId: this.currLoginId,
                    fileUrl: this.form.fileUrl
                })
                .then((r) => {
                    console.log(this.form.fileUrl);
                });
            this.$message.success('提交成功！');
            this.$router.push({path:'/advicelist'})
        },
        isExist() {
            this.$axios.get('/manage/admin/klass/getKlassByName/' + this.form.classname).then((r) => {
                if (r.data.code == 200) {
                    //console.log(r.data.data);
                    if (r.data.data==null) {
                        this.$message.error('班级不存在');
                    }
                }
            });
        },
        // 设置文件上传成功返回url
        update(res, file, fileList){
            //console.log(res.data);
            this.form.fileUrl=res.data;
        }
    },
    created() {
        this.$axios.get('/advice/catogery/get').then((r) => {
            if (r.data.code == 200) {
                this.form.options = r.data.data;
            }
        });
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '请输入内容';
        }, 1500);
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    }
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>